
import { useState, useEffect } from 'react'
import { useHistory } from 'react-router-dom'
import Nav from "../../component/Nav/index"
import fd from "../../utils/fd"
import './index.scss'
//接口
import { getpur } from '../../api/house'
export const Record = () => {
    const { push } = useHistory()
    const [value, setValue] = useState({
        qs: '',
        prov: '',
        name: ''
    });
    const [data, setData] = useState([])
    useEffect(() => {
        const getList = async () => {
            let res = await getpur({ payload: value })
            console.log(res);
            setData(res.data)
        }
        getList()
    }, [value])
    return (
        <div className="record">
            <Nav>战绩</Nav>
            {/* 搜索 */}
            <div className="search">
                <p>
                    <span>北京</span>
                    <i className='iconfont icon-xiangxia'></i>
                </p>
                <div>
                    <input type="text" placeholder='请在这里输入区域/商圈' onChange={({ target: { value } }) => {
                        fd(() => setValue(prev => {
                            prev = {
                                ...prev,
                                name: value
                            }
                            return { ...prev }
                        }));
                    }} />
                    <i className='iconfont icon-sousuo'></i>
                </div>
                <span>成交战绩</span>
            </div>
            <div className="record-content">
                {
                    data.length ? data.map(item => {
                        return <div className="list-box" key={item.id} onClick={() => {
                            push({ pathname: '/detail', state: { data: item } })
                        }}>
                            <img src={item.img} alt="" />
                            <div className='list-item'>
                                <h3>{item.name}</h3>
                                <p>{item.mianji}平{item.fangxing} 1厅/{item.xq}</p>
                                <div>
                                    <h3>{item.jiage}</h3>/m<sup>2</sup>
                                </div>
                                <span>小区</span>
                            </div>
                        </div>
                    }) : ""
                }
            </div>
        </div>
    );
};

export default Record;